import "./skills.scss";
import useFadeInOnScroll from "../Hooks/useFadeInOnScroll";
import { animated } from "react-spring";

const Skills = () => {
  const fadeIn = useFadeInOnScroll(2900);
  return (
    <div className="skills">
      <animated.div style={fadeIn} className="skills__wrapper">
        <div className="skills__container">
          <div className="skills__name">Продукт</div>
          <div className="skills__list">
            Customer Development <br />
            Глубинные интервью <br />
            Количественный анализ <br />
            Анализ рынка, конкурентов <br />
            Анализ данных <br />
            Метрики <br />
            Jobs To Be Done <br />
            Customer Journey Map <br />
            Persona Method <br />
            AARRR <br />
            HADI-цикл <br />
            Карты Эмпатии
          </div>
        </div>
        <div className="skills__container">
          <div className="skills__name">UXI</div>
          <div className="skills__list">
            Шрифты <br />
            Цветовая палитра <br />
            Ton Of Voice <br />
            Прототипирование <br />
            Анимация <br />
            Информационная архитектура <br /> Task-Flow <br /> Тестирование
            <br />
            Работа с графикой
          </div>
        </div>

        <div className="skills__container">
          <div className="skills__name">Команда</div>
          <div className="skills__list">
            Контроль разработки <br />
            Передача макетов в разработку
            <br />
            Big Job для команды <br />
            Фиксирование договоренностей <br />
            Roadmap <br />
            Feature List <br />
            RICE/ICE/ROI/Rearch & Frequency <br />
            DoR/DoD/Smart <br />
            Scrum / Agile <br /> Poker Planning
          </div>
        </div>
        <div className="skills__container">
          <div className="skills__name">Документация</div>
          <div className="skills__list">
            Дизайн Система <br />
            UI-kit <br />
            Гайдлайны
          </div>
        </div>
        <div className="skills__container">
          <div className="skills__name">Знания/Навыки</div>
          <div className="skills__list">
            Распространение знаний <br />
            Менторинг
          </div>
        </div>
      </animated.div>
    </div>
  );
};
export default Skills;
